<template>
	<div class="appeal_list">
	  <el-form :inline="true" :model="appealSearch" label-width="70px" style="min-width: 1200px;" class='searchForm'>
		<el-form-item label="项目名称">
			<el-input v-model="appealSearch.project_name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item label="申请人">
			<el-input v-model="appealSearch.user_name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="reset">重置</el-button>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-form-item>
	  </el-form>
	  <el-table :data="appeal_list.results" class='table'>
		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="项目名称" min-width="150">
			<template #default="scope">
				<span style="margin-right: 10px;">{{ scope.row.project_name }}</span>
			    <el-tag v-if="scope.row.project_create_by_id === user_id"  effect="dark" round size="small">我的</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="项目创建人" min-width="150" prop="project_create_by"></el-table-column>
		<el-table-column label="申请人" prop="create_by_name" min-width="200"></el-table-column>
		<el-table-column label="创建时间" prop="create_time" sortable min-width="150"/>
		<el-table-column label="更新时间" prop="update_time" sortable min-width="150"/>
		<el-table-column align="center" min-width="180">
			<template #default="scope" min-width='200px'>
			  <el-button v-if='scope.row.status === false' size="small" type='primary' @click="approved(scope.row)">同意</el-button>
			  <el-tag v-else  effect="dark" round size="small">已同意</el-tag>
			</template>
		</el-table-column>
	  </el-table>
	  <div style="margin: 10px">
	  	<el-pagination
	  	  v-model:current-page="page_size_params.page"
	  	  v-model:page-size="page_size_params.size"
	  	  :page-sizes="[10, 20, 30, 50]"
	  	  :small="small"
	  	  :disabled="disabled"
	  	  :background="background"
	  	  :hide-on-single-page="false"
	  	  layout="total, sizes, prev, pager, next, jumper"
	  	  :total="appeal_list.count"
	  	  @size-change="handleSizeChange"
	  	  @current-change="handleCurrentChange"
	  	/>
	  </div>
	</div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, Pointer} from '@element-plus/icons-vue'

export default{
	computed:{
		...mapState(['user_id', 'projectInfo',  'user_name']),
	},
	data() {
		return {
			appealSearch:{
				project_name: '',
				user_name: '',
				project_create_by_id: ''
			},
			page_size_params: {
				page: 1,
				size: 10,
			},
			count: 1,
			title: '新增用户',
			isAdd: true,
			editDialogVisible: false,
			appeal_list: [],
			ViewVisible: false,
			AppealSave:{
				id: '',
				status: '',
				project: '',
				user: '',
			},
			user_list: [],
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
			Pointer,
		}
	},
	methods:{
		...mapActions(['getRolePermission']),
		handleCurrentChange(){
			this.getProjectAppeals()
		},
		handleSizeChange(){
			this.getProjectAppeals()
		},
		search(){
			this.getProjectAppeals()
		},
		reset(){
			for(let key in this.appealSearch){
				this.appealSearch[key] = ''
			}
		},
		approved(row_data){
			this.AppealSave.project = row_data.project
			this.AppealSave.user = row_data.user
			this.AppealSave.status = true
			this.updaterojectAppeal(row_data.id,  this.AppealSave)
		},
		async getProjectAppeals(){
			this.appealSearch.project_create_by_id = this.user_id
			const response = await this.$api.getProjectAppeals(Object.assign(this.appealSearch, this.page_size_params))
			if (response.status === 200){
				this.appeal_list = {...response.data}
			}
		},
		async updaterojectAppeal(id, params){
			const response = await this.$api.updateProjectAppeal(id, params)
			if (response.status === 200){
				this.getProjectAppeals()
			}
		},
	},
	created() {
		this.getProjectAppeals()
	}
}
</script>

<style scoped>
	.appeal_list{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.appeal_list .searchForm{
		width: 100%;
		flex: 1;
		background-color: white;
		padding: 15px 15px 0 15px;
		margin-bottom: 5px;
	}
	.appeal_list .el-form--inline .el-form-item{
		margin-bottom: 15px;
	}
	.appeal_list .table{
		background-color: white;
		flex: 1;
	}
	.searchForm .el-input{
		width: 150px;
	}
	.searchForm .el-select{
		width: 150px;
	}
	.dialog .el-input{
		width: 300px;
	}
	.dialog .el-select{
		width: 300px;
	}
	.form .el-select{
		width: 300px;
	}
	.el-button{
		width: 70px;
	}
	.el-icon{
		margin-left: 10px;
	}
	
</style>
